<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                template="/sprint/template.xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:fn="http://java.sun.com/jsp/jstl/functions">
    <ui:define name="main-head">
        <link rel="stylesheet" type="text/css" href="#{root}css/main.css" />        
        <title>Pizarra Sprint</title>
    </ui:define> 

    <ui:define name="main-content">        
        <h:form>
            <br/>
            <h3><h:outputText value="#{msgs.pizarraScrum}"/></h3><br/>
            <p:growl id="growl" showDetail="true"/>  

            <div class="row-fluid">
                <div class="span12" align="center">
                    <div class="row-fluid">
                        <div class="span2">&nbsp;</div>
                        <div class="span8">
                            <div class="row-fluid">
                                <div class="span12">
                                    <div class="row-fluid">
                                        <div class="span4 btn-danger">To do</div>
                                    <div class="span4 btn-warning">Doing</div>
                                    <div class="span4 btn-success">Done</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="span2">&nbsp;</div>
                    </div>
                </div>
            </div>

            <div class="container" align="center">
                <h:panelGrid columns="1" border="0" >
                    <p:dashboard id="board" model="#{pizarraBean.model}" style="padding-right: 10px">  
                        <p:ajax event="reorder" listener="#{pizarraBean.handleReorder}" update="growl" />  

                        <c:forEach items="${pizarraBean.tasks}" var="task">

                            <p:panel id="#{task.id}" header="${task.colaborador}" style="width: 190px">  
                                <h:outputText value="#{task.descripcion}"/><br/><br/>
                                <h:outputText value="#{msgs.estimacion}: "/>
                                <h:outputText value="#{task.estimacion}" style="right: auto"/><br/>
                            </p:panel>  
                            
                        </c:forEach>   
                    </p:dashboard>      
                </h:panelGrid>
            </div>
        </h:form>

    </ui:define>
</ui:composition>
